<template>
  <div>
    <div class="card-header">
      <span>{{title}}</span>
      <svg t="1665400148315" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4237" width="16" height="16">
        <path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m-32 192h64v64h-64v-64z m160 512H384v-64h96V458.4L400.8 480 384 418.4 511.2 384H544v320h96v64z" p-id="4238" fill="#8a8a8a"></path>
      </svg>
    </div>
    <div class="card-contents">{{count}}</div>
    <div class="card-charts">
      <slot name="charts">

      </slot>
    </div>
    <div class="card-footer">
      <slot name="footer">
        
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  props:['title','count']
}
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  color: grey;
}
.card-contents {
  padding: 10px 0;
  font-size: 30px;
}
.card-charts {
  height: 40px;
  font-size: 14px;
}
.card-footer {
  border-top: 1px solid #eee;
  height: 30px;
  line-height: 40px;
}
</style>